<template>
  <div class="container">
    <el-dialog
      :title="dialogTitle + '批次'"
      :visible.sync="dialogShow"
      :before-close="dialogClose"
      width="600px"
    >
      <div>
        <el-form ref="form" label-width="140px" :model="form" :rules="formRules">
          <el-form-item label="批次名称：" required prop="batchName">
            <el-input v-model="form.batchName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="面试开始时间：" prop="beginTime">
            <el-date-picker
              v-model="form.beginTime"
              type="datetime"
              placeholder="选择日期"
              class="width100"
              format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
              default-time="08:00:00"
            />
            <!-- :picker-options="pickerOptions" -->
          </el-form-item>
          <el-form-item label="面试结束时间：" prop="endTime">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期"
              class="width100"
              format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
              default-time="20:00:00"
            />
            <!-- :picker-options="pickerOptionsInterviewEndTime" -->
          </el-form-item>
          
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { batchAdd, batchEdit, batchView } from '@/api/conferenceRoomBatch'

export default {
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    var validateInterviewEndTime = (rule, value, callback) => {
      if (new Date(value).getTime() - new Date(this.form.beginTime).getTime() < 15 * 1000 * 60) {
        callback(new Error('面试周期最少15分钟'))
      }
      // else if(new Date(value).getTime() - new Date(this.form.beginTime).getTime() > 1440 * 1000 * 60){
      //   callback(new Error('面试周期不能大于一天'))
      // } 
      else {
        callback()
      }
    }
    return {
      dialogTitle: '',
      dialogShow: false,
      submitLoading: false,
      form: {
        batchName: '',
        beginTime: '',
        endTime: ''
      },
      formRules: {
        batchName: [{ required: true, message: '请输入批次名称' }],
        beginTime: [{ required: true, message: '请选择面试开始时间' }],
        endTime: [{ required: true, message: '请选择面试结束时间' }, { validator: validateInterviewEndTime, trigger: 'blur' }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },

      pickerOptionsInterviewEndTime: {
        disabledDate(time) {
          return time.getTime() < Date.now()- 8.64e7;
        }
      },
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 提交
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.form))
          if (form.id) {
            batchEdit(form).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.submitLoading = false
              this.dialogClose()
            }).catch(err => {
              this.submitLoading = false
            })
          } else {
            batchAdd(form).then((res) => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.submitLoading = false
              this.dialogClose()
            }).catch(err => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    dialogClose() {
      this.submitLoading = false
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
      this.dialogShow = false
      this.$emit('refresh')
    },
    show(id, roomId) {
      this.dialogShow = true
      if (id) {
        this.dialogTitle = '编辑'
        batchView({
          id: id
        }).then((res) => {
          const data = res.result
          this.form = {
            id: data.id,
            batchName: data.batchName,
            beginTime: data.beginTime,
            roomId: roomId,
            endTime: data.endTime
          }
        })
      } else {
        this.form = {
          roomId: roomId,
          batchName: '',
          beginTime: '',
          endTime: ''
        }
        this.dialogTitle = '新增'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
